<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">

    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>

        <a class="nav-more" href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4022387"
           target="_blank">查看项目</a>

    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">

              <li class="dib">
                  <span class="icon iconfont">&#xe61e;</span>
                  <div class="name">日志</div>
                  <div class="code-name">&amp;#xe61e;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xec76;</span>
                  <div class="name">开关</div>
                  <div class="code-name">&amp;#xec76;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6b4;</span>
                  <div class="name">x_模块</div>
                  <div class="code-name">&amp;#xe6b4;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe627;</span>
                  <div class="name">路由器</div>
                  <div class="code-name">&amp;#xe627;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe607;</span>
                  <div class="name">洗衣机</div>
                  <div class="code-name">&amp;#xe607;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6af;</span>
                  <div class="name">设备_电饭煲</div>
                  <div class="code-name">&amp;#xe6af;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6b2;</span>
                  <div class="name">设备_电扇</div>
                  <div class="code-name">&amp;#xe6b2;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6b3;</span>
                  <div class="name">净水器-f</div>
                  <div class="code-name">&amp;#xe6b3;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe625;</span>
                  <div class="name">微波炉</div>
                  <div class="code-name">&amp;#xe625;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe605;</span>
                  <div class="name">冰箱</div>
                  <div class="code-name">&amp;#xe605;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe62a;</span>
                  <div class="name">系统管理</div>
                  <div class="code-name">&amp;#xe62a;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe602;</span>
                  <div class="name">冰箱</div>
                  <div class="code-name">&amp;#xe602;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe603;</span>
                  <div class="name">空调</div>
                  <div class="code-name">&amp;#xe603;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6b0;</span>
                  <div class="name">立式空调</div>
                  <div class="code-name">&amp;#xe6b0;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xeb96;</span>
                  <div class="name">工业组件-指示灯</div>
                  <div class="code-name">&amp;#xeb96;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe7e7;</span>
                  <div class="name">吊灯</div>
                  <div class="code-name">&amp;#xe7e7;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe60a;</span>
                  <div class="name">射灯</div>
                  <div class="code-name">&amp;#xe60a;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe60c;</span>
                  <div class="name">吸顶灯</div>
                  <div class="code-name">&amp;#xe60c;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xeb62;</span>
                  <div class="name">编辑</div>
                  <div class="code-name">&amp;#xeb62;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe871;</span>
                  <div class="name">报警,警报,报警灯,危险</div>
                  <div class="code-name">&amp;#xe871;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe601;</span>
                  <div class="name">扫描</div>
                  <div class="code-name">&amp;#xe601;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe816;</span>
                  <div class="name">执行</div>
                  <div class="code-name">&amp;#xe816;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe612;</span>
                  <div class="name">管理员_角色管理</div>
                  <div class="code-name">&amp;#xe612;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe619;</span>
                  <div class="name">菜单管理</div>
                  <div class="code-name">&amp;#xe619;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe62d;</span>
                  <div class="name">用户组管理</div>
                  <div class="code-name">&amp;#xe62d;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe634;</span>
                  <div class="name">系统管理</div>
                  <div class="code-name">&amp;#xe634;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe61d;</span>
                  <div class="name">全局参数 base/setting/globalParams</div>
                  <div class="code-name">&amp;#xe61d;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6ae;</span>
                  <div class="name">用户管理</div>
                  <div class="code-name">&amp;#xe6ae;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe606;</span>
                  <div class="name">文件夹</div>
                  <div class="code-name">&amp;#xe606;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe604;</span>
                  <div class="name">拖动</div>
                  <div class="code-name">&amp;#xe604;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6ad;</span>
                  <div class="name">拖动</div>
                  <div class="code-name">&amp;#xe6ad;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe61c;</span>
                  <div class="name">拖动</div>
                  <div class="code-name">&amp;#xe61c;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe610;</span>
                  <div class="name">灯条</div>
                  <div class="code-name">&amp;#xe610;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe98f;</span>
                  <div class="name">技术服务</div>
                  <div class="code-name">&amp;#xe98f;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe7b8;</span>
                  <div class="name">品牌</div>
                  <div class="code-name">&amp;#xe7b8;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6a9;</span>
                  <div class="name">脚本</div>
                  <div class="code-name">&amp;#xe6a9;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe60b;</span>
                  <div class="name">资产</div>
                  <div class="code-name">&amp;#xe60b;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6aa;</span>
                  <div class="name">物料厂商</div>
                  <div class="code-name">&amp;#xe6aa;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6ab;</span>
                  <div class="name">服务</div>
                  <div class="code-name">&amp;#xe6ab;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe70e;</span>
                  <div class="name">首页</div>
                  <div class="code-name">&amp;#xe70e;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe608;</span>
                  <div class="name">就业协议</div>
                  <div class="code-name">&amp;#xe608;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xeb61;</span>
                  <div class="name">场景管理</div>
                  <div class="code-name">&amp;#xeb61;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xec5d;</span>
                  <div class="name">网关</div>
                  <div class="code-name">&amp;#xec5d;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe628;</span>
                  <div class="name">设备维护管理</div>
                  <div class="code-name">&amp;#xe628;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6ac;</span>
                  <div class="name">区域排序</div>
                  <div class="code-name">&amp;#xe6ac;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe60e;</span>
                  <div class="name">设备组管理</div>
                  <div class="code-name">&amp;#xe60e;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe600;</span>
                  <div class="name">宏观决策</div>
                  <div class="code-name">&amp;#xe600;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe638;</span>
                  <div class="name">能源</div>
                  <div class="code-name">&amp;#xe638;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe60f;</span>
                  <div class="name">实体模型</div>
                  <div class="code-name">&amp;#xe60f;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe613;</span>
                  <div class="name">日程</div>
                  <div class="code-name">&amp;#xe613;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe62b;</span>
                  <div class="name">日程</div>
                  <div class="code-name">&amp;#xe62b;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6da;</span>
                  <div class="name">后台管理-设备库存</div>
                  <div class="code-name">&amp;#xe6da;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe737;</span>
                  <div class="name">自动化</div>
                  <div class="code-name">&amp;#xe737;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe621;</span>
                  <div class="name">资产</div>
                  <div class="code-name">&amp;#xe621;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe856;</span>
                  <div class="name">电灯,电灯,发光,光,灯泡,想法</div>
                  <div class="code-name">&amp;#xe856;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe6c7;</span>
                  <div class="name">坐标点</div>
                  <div class="code-name">&amp;#xe6c7;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe667;</span>
                  <div class="name">正常</div>
                  <div class="code-name">&amp;#xe667;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe668;</span>
                  <div class="name">报警</div>
                  <div class="code-name">&amp;#xe668;</div>
              </li>

              <li class="dib">
                  <span class="icon iconfont">&#xe669;</span>
                <div class="name">故障</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe66a;</span>
                <div class="name">离线</div>
                <div class="code-name">&amp;#xe66a;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">用户信息</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">退出登录</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe66d;</span>
                <div class="name">下班打卡</div>
                <div class="code-name">&amp;#xe66d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe66e;</span>
                <div class="name">上班打卡</div>
                <div class="code-name">&amp;#xe66e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe66f;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe66f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">火警</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">报警1</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">故障1</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">启动</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe674;</span>
                <div class="name">报表统计</div>
                <div class="code-name">&amp;#xe674;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">分析报告</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">应急疏散</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">蓄电池</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">建筑分析</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">高压配电房</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe67a;</span>
                <div class="name">电梯机房</div>
                <div class="code-name">&amp;#xe67a;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe67b;</span>
                <div class="name">消火栓稳压房</div>
                <div class="code-name">&amp;#xe67b;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">所用场景</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe67d;</span>
                <div class="name">车库出入口</div>
                <div class="code-name">&amp;#xe67d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe67e;</span>
                <div class="name">锅炉房</div>
                <div class="code-name">&amp;#xe67e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe67f;</span>
                <div class="name">低压配电房</div>
                <div class="code-name">&amp;#xe67f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe680;</span>
                <div class="name">中控室</div>
                <div class="code-name">&amp;#xe680;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">生活水泵房</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe682;</span>
                <div class="name">柴油发电机房</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe683;</span>
                <div class="name">综合水泵房</div>
                <div class="code-name">&amp;#xe683;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">中央空调房</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe685;</span>
                <div class="name">返回上级</div>
                <div class="code-name">&amp;#xe685;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe686;</span>
                <div class="name">手报</div>
                <div class="code-name">&amp;#xe686;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe687;</span>
                <div class="name">声光</div>
                <div class="code-name">&amp;#xe687;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe688;</span>
                <div class="name">火警-</div>
                <div class="code-name">&amp;#xe688;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">箭头-右</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">通知1</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe68b;</span>
                <div class="name">GIS</div>
                <div class="code-name">&amp;#xe68b;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe68c;</span>
                <div class="name">视频</div>
                <div class="code-name">&amp;#xe68c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe68d;</span>
                <div class="name">平面图</div>
                <div class="code-name">&amp;#xe68d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe68e;</span>
                <div class="name">处理</div>
                <div class="code-name">&amp;#xe68e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe68f;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe68f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe690;</span>
                <div class="name">单位</div>
                <div class="code-name">&amp;#xe690;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe691;</span>
                <div class="name">中心</div>
                <div class="code-name">&amp;#xe691;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe692;</span>
                <div class="name">双箭头-左</div>
                <div class="code-name">&amp;#xe692;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe693;</span>
                <div class="name">双箭头-右</div>
                <div class="code-name">&amp;#xe693;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe694;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe694;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe695;</span>
                <div class="name">中继器</div>
                <div class="code-name">&amp;#xe695;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe696;</span>
                <div class="name">器件</div>
                <div class="code-name">&amp;#xe696;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe697;</span>
                <div class="name">断路器</div>
                <div class="code-name">&amp;#xe697;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe698;</span>
                <div class="name">视频盒子</div>
                <div class="code-name">&amp;#xe698;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe699;</span>
                <div class="name">摄像头1</div>
                <div class="code-name">&amp;#xe699;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe69a;</span>
                <div class="name">输入模块</div>
                <div class="code-name">&amp;#xe69a;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">输入输出模块</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe69c;</span>
                <div class="name">布防</div>
                <div class="code-name">&amp;#xe69c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe69d;</span>
                <div class="name">撤防</div>
                <div class="code-name">&amp;#xe69d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe69e;</span>
                <div class="name">物联网网关</div>
                <div class="code-name">&amp;#xe69e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe69f;</span>
                <div class="name">停止</div>
                <div class="code-name">&amp;#xe69f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a0;</span>
                <div class="name">设备联动</div>
                <div class="code-name">&amp;#xe6a0;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a1;</span>
                <div class="name">云同步</div>
                <div class="code-name">&amp;#xe6a1;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a2;</span>
                <div class="name">环境监测</div>
                <div class="code-name">&amp;#xe6a2;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">粉尘监测</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">热成像</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">水质监测</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a6;</span>
                <div class="name">驱动站</div>
                <div class="code-name">&amp;#xe6a6;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">禁用</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6a8;</span>
                <div class="name">启用</div>
                <div class="code-name">&amp;#xe6a8;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">火灾自动报警系统</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">无线火灾报警系统</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe63e;</span>
                <div class="name">消防用水系统</div>
                <div class="code-name">&amp;#xe63e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe63f;</span>
                <div class="name">综合测控系统</div>
                <div class="code-name">&amp;#xe63f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe640;</span>
                <div class="name">电气火灾系统</div>
                <div class="code-name">&amp;#xe640;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">智慧用电系统</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">防火门系统</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">视频系统</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">温湿度</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">排风机</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">消防水泵</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe647;</span>
                <div class="name">液压传感器</div>
                <div class="code-name">&amp;#xe647;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe648;</span>
                <div class="name">表面温度</div>
                <div class="code-name">&amp;#xe648;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">门磁开关</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">震动传感器</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">噪声</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">液位传感器</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe64d;</span>
                <div class="name">水浸</div>
                <div class="code-name">&amp;#xe64d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe64e;</span>
                <div class="name">红外探测器</div>
                <div class="code-name">&amp;#xe64e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">故障电弧</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">设备型号</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">用传设备</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">报警主机</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe653;</span>
                <div class="name">可燃气体探测器</div>
                <div class="code-name">&amp;#xe653;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe654;</span>
                <div class="name">感温探测器</div>
                <div class="code-name">&amp;#xe654;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe655;</span>
                <div class="name">感烟探测器</div>
                <div class="code-name">&amp;#xe655;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe656;</span>
                <div class="name">语音记录</div>
                <div class="code-name">&amp;#xe656;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">电话记录</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe658;</span>
                <div class="name">值班记录</div>
                <div class="code-name">&amp;#xe658;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe659;</span>
                <div class="name">操作记录</div>
                <div class="code-name">&amp;#xe659;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe65a;</span>
                <div class="name">事件记录</div>
                <div class="code-name">&amp;#xe65a;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe65b;</span>
                <div class="name">登录记录</div>
                <div class="code-name">&amp;#xe65b;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">短信记录</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe65d;</span>
                <div class="name">微型消防站</div>
                <div class="code-name">&amp;#xe65d;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">维保</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">重点部位</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe660;</span>
                <div class="name">设备统计</div>
                <div class="code-name">&amp;#xe660;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">巡检统计</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe662;</span>
                <div class="name">值班人员</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe663;</span>
                <div class="name">火警预案</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe664;</span>
                <div class="name">危险品</div>
                <div class="code-name">&amp;#xe664;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">工单记录</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">运行</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>

              <li class="dib">
              <span class="icon iconfont">&#xe6b1;</span>
                <div class="name">iconhamburger</div>
                <div class="code-name">&amp;#xe6b1;</div>
              </li>

          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.woff2?t=1691754305415') format('woff2'),
       url('iconfont.woff?t=1691754305415') format('woff'),
       url('iconfont.ttf?t=1691754305415') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
        <div class="content font-class">
            <ul class="icon_lists dib-box">

                <li class="dib">
                    <span class="icon iconfont icon-rizhi"></span>
                    <div class="name">
                        日志
                    </div>
                    <div class="code-name">.icon-rizhi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-kaiguan"></span>
                    <div class="name">
                        开关
                    </div>
                    <div class="code-name">.icon-kaiguan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-x_mokuai"></span>
                    <div class="name">
                        x_模块
                    </div>
                    <div class="code-name">.icon-x_mokuai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-luyouqi"></span>
                    <div class="name">
                        路由器
                    </div>
                    <div class="code-name">.icon-luyouqi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xiyiji"></span>
                    <div class="name">
                        洗衣机
                    </div>
                    <div class="code-name">.icon-xiyiji
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-hekriconshebeidianfanbao"></span>
                    <div class="name">
                        设备_电饭煲
                    </div>
                    <div class="code-name">.icon-hekriconshebeidianfanbao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-hekriconshebeidianshan"></span>
                    <div class="name">
                        设备_电扇
                    </div>
                    <div class="code-name">.icon-hekriconshebeidianshan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jingshuiqi-f"></span>
                    <div class="name">
                        净水器-f
                    </div>
                    <div class="code-name">.icon-jingshuiqi-f
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-weibolu"></span>
                    <div class="name">
                        微波炉
                    </div>
                    <div class="code-name">.icon-weibolu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bingxiang1"></span>
                    <div class="name">
                        冰箱
                    </div>
                    <div class="code-name">.icon-bingxiang1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xitongguanli1"></span>
                    <div class="name">
                        系统管理
                    </div>
                    <div class="code-name">.icon-xitongguanli1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bingxiang"></span>
                    <div class="name">
                        冰箱
                    </div>
                    <div class="code-name">.icon-bingxiang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-kongdiao"></span>
                    <div class="name">
                        空调
                    </div>
                    <div class="code-name">.icon-kongdiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-lishikongtiao"></span>
                    <div class="name">
                        立式空调
                    </div>
                    <div class="code-name">.icon-lishikongtiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-gongyezujian-zhishideng"></span>
                    <div class="name">
                        工业组件-指示灯
                    </div>
                    <div class="code-name">.icon-gongyezujian-zhishideng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-diaodeng"></span>
                    <div class="name">
                        吊灯
                    </div>
                    <div class="code-name">.icon-diaodeng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shedeng"></span>
                    <div class="name">
                        射灯
                    </div>
                    <div class="code-name">.icon-shedeng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xidingdeng"></span>
                    <div class="name">
                        吸顶灯
                    </div>
                    <div class="code-name">.icon-xidingdeng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bianji"></span>
                    <div class="name">
                        编辑
                    </div>
                    <div class="code-name">.icon-bianji
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-alarm-full"></span>
                    <div class="name">
                        报警,警报,报警灯,危险
                    </div>
                    <div class="code-name">.icon-alarm-full
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-saomiao"></span>
                    <div class="name">
                        扫描
                    </div>
                    <div class="code-name">.icon-saomiao
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zhihang"></span>
                    <div class="name">
                        执行
                    </div>
                    <div class="code-name">.icon-zhihang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-guanliyuan_jiaoseguanli"></span>
                    <div class="name">
                        管理员_角色管理
                    </div>
                    <div class="code-name">.icon-guanliyuan_jiaoseguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-caidanguanli"></span>
                    <div class="name">
                        菜单管理
                    </div>
                    <div class="code-name">.icon-caidanguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yonghuzuguanli"></span>
                    <div class="name">
                        用户组管理
                    </div>
                    <div class="code-name">.icon-yonghuzuguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xitongguanli"></span>
                    <div class="name">
                        系统管理
                    </div>
                    <div class="code-name">.icon-xitongguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-base_globalParamsquanjucanshu"></span>
                    <div class="name">
                        全局参数 base/setting/globalParams
                    </div>
                    <div class="code-name">.icon-base_globalParamsquanjucanshu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-yonghuguanli"></span>
                    <div class="name">
                        用户管理
                    </div>
                    <div class="code-name">.icon-yonghuguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wenjianjia2"></span>
                    <div class="name">
                        文件夹
                    </div>
                    <div class="code-name">.icon-wenjianjia2
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tuodong"></span>
                    <div class="name">
                        拖动
                    </div>
                    <div class="code-name">.icon-tuodong
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tuodong1"></span>
                    <div class="name">
                        拖动
                    </div>
                    <div class="code-name">.icon-tuodong1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-tuodong2"></span>
                    <div class="name">
                        拖动
                    </div>
                    <div class="code-name">.icon-tuodong2
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-xingzhuang"></span>
                    <div class="name">
                        灯条
                    </div>
                    <div class="code-name">.icon-xingzhuang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jishufuwu"></span>
                    <div class="name">
                        技术服务
                    </div>
                    <div class="code-name">.icon-jishufuwu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-pinpai"></span>
                    <div class="name">
                        品牌
                    </div>
                    <div class="code-name">.icon-pinpai
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jiaoben"></span>
                    <div class="name">
                        脚本
                    </div>
                    <div class="code-name">.icon-jiaoben
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-assets"></span>
                    <div class="name">
                        资产
                    </div>
                    <div class="code-name">.icon-assets
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wuliaochangshang"></span>
                    <div class="name">
                        物料厂商
                    </div>
                    <div class="code-name">.icon-wuliaochangshang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-fuwu"></span>
                    <div class="name">
                        服务
                    </div>
                    <div class="code-name">.icon-fuwu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shouye"></span>
                    <div class="name">
                        首页
                    </div>
                    <div class="code-name">.icon-shouye
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-jiuyexieyi"></span>
                    <div class="name">
                        就业协议
                    </div>
                    <div class="code-name">.icon-jiuyexieyi
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-changjingguanli"></span>
                    <div class="name">
                        场景管理
                    </div>
                    <div class="code-name">.icon-changjingguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-wangguan"></span>
                    <div class="name">
                        网关
                    </div>
                    <div class="code-name">.icon-wangguan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shebeiweihuguanli"></span>
                    <div class="name">
                        设备维护管理
                    </div>
                    <div class="code-name">.icon-shebeiweihuguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-quyupaixu"></span>
                    <div class="name">
                        区域排序
                    </div>
                    <div class="code-name">.icon-quyupaixu
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shebeizuguanli"></span>
                    <div class="name">
                        设备组管理
                    </div>
                    <div class="code-name">.icon-shebeizuguanli
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-juece"></span>
                    <div class="name">
                        宏观决策
                    </div>
                    <div class="code-name">.icon-juece
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-nengyuan"></span>
                    <div class="name">
                        能源
                    </div>
                    <div class="code-name">.icon-nengyuan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-shitimoxing"></span>
                    <div class="name">
                        实体模型
                    </div>
                    <div class="code-name">.icon-shitimoxing
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-richeng"></span>
                    <div class="name">
                        日程
                    </div>
                    <div class="code-name">.icon-richeng
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-richeng1"></span>
                    <div class="name">
                        日程
                    </div>
                    <div class="code-name">.icon-richeng1
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-houtaiguanli-shebeikucun"></span>
                    <div class="name">
                        后台管理-设备库存
                    </div>
                    <div class="code-name">.icon-houtaiguanli-shebeikucun
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zidonghua"></span>
                    <div class="name">
                        自动化
                    </div>
                    <div class="code-name">.icon-zidonghua
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zichan"></span>
                    <div class="name">
                        资产
                    </div>
                    <div class="code-name">.icon-zichan
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-bulb-full"></span>
                    <div class="name">
                        电灯,电灯,发光,光,灯泡,想法
                    </div>
                    <div class="code-name">.icon-bulb-full
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zuobiaodian"></span>
                    <div class="name">
                        坐标点
                    </div>
                    <div class="code-name">.icon-zuobiaodian
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-zhengchang"></span>
                    <div class="name">
                        正常
                    </div>
                    <div class="code-name">.icon-zhengchang
                    </div>
                </li>

                <li class="dib">
                    <span class="icon iconfont icon-baojing"></span>
            <div class="name">
              报警
            </div>
            <div class="code-name">.icon-baojing
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-guzhang"></span>
            <div class="name">
              故障
            </div>
            <div class="code-name">.icon-guzhang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-lixian"></span>
            <div class="name">
              离线
            </div>
            <div class="code-name">.icon-lixian
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yonghuxinxi"></span>
            <div class="name">
              用户信息
            </div>
            <div class="code-name">.icon-yonghuxinxi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-tuichudenglu"></span>
            <div class="name">
              退出登录
            </div>
            <div class="code-name">.icon-tuichudenglu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xiabandaka"></span>
            <div class="name">
              下班打卡
            </div>
            <div class="code-name">.icon-xiabandaka
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shangbandaka"></span>
            <div class="name">
              上班打卡
            </div>
            <div class="code-name">.icon-shangbandaka
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-huojing"></span>
            <div class="name">
              火警
            </div>
            <div class="code-name">.icon-huojing
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-baojing1"></span>
            <div class="name">
              报警1
            </div>
            <div class="code-name">.icon-baojing1
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-guzhang1"></span>
            <div class="name">
              故障1
            </div>
            <div class="code-name">.icon-guzhang1
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-qidong"></span>
            <div class="name">
              启动
            </div>
            <div class="code-name">.icon-qidong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-baobiaotongji"></span>
            <div class="name">
              报表统计
            </div>
            <div class="code-name">.icon-baobiaotongji
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-fenxibaogao"></span>
            <div class="name">
              分析报告
            </div>
            <div class="code-name">.icon-fenxibaogao
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yingjishusan"></span>
            <div class="name">
              应急疏散
            </div>
            <div class="code-name">.icon-yingjishusan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xudianchi"></span>
            <div class="name">
              蓄电池
            </div>
            <div class="code-name">.icon-xudianchi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-jianzhufenxi"></span>
            <div class="name">
              建筑分析
            </div>
            <div class="code-name">.icon-jianzhufenxi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-gaoyapeidianfang"></span>
            <div class="name">
              高压配电房
            </div>
            <div class="code-name">.icon-gaoyapeidianfang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-diantijifang"></span>
            <div class="name">
              电梯机房
            </div>
            <div class="code-name">.icon-diantijifang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xiaohuoshuanwenyafang"></span>
            <div class="name">
              消火栓稳压房
            </div>
            <div class="code-name">.icon-xiaohuoshuanwenyafang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-suoyongchangjing"></span>
            <div class="name">
              所用场景
            </div>
            <div class="code-name">.icon-suoyongchangjing
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-chekuchurukou"></span>
            <div class="name">
              车库出入口
            </div>
            <div class="code-name">.icon-chekuchurukou
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-guolufang"></span>
            <div class="name">
              锅炉房
            </div>
            <div class="code-name">.icon-guolufang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-diyapeidianfang"></span>
            <div class="name">
              低压配电房
            </div>
            <div class="code-name">.icon-diyapeidianfang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhongkongshi"></span>
            <div class="name">
              中控室
            </div>
            <div class="code-name">.icon-zhongkongshi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shenghuoshuibengfang"></span>
            <div class="name">
              生活水泵房
            </div>
            <div class="code-name">.icon-shenghuoshuibengfang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-chaiyoufadianjifang"></span>
            <div class="name">
              柴油发电机房
            </div>
            <div class="code-name">.icon-chaiyoufadianjifang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zongheshuibengfang"></span>
            <div class="name">
              综合水泵房
            </div>
            <div class="code-name">.icon-zongheshuibengfang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhongyangkongtiaofang"></span>
            <div class="name">
              中央空调房
            </div>
            <div class="code-name">.icon-zhongyangkongtiaofang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-fanhuishangji"></span>
            <div class="name">
              返回上级
            </div>
            <div class="code-name">.icon-fanhuishangji
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shoubao"></span>
            <div class="name">
              手报
            </div>
            <div class="code-name">.icon-shoubao
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shengguang"></span>
            <div class="name">
              声光
            </div>
            <div class="code-name">.icon-shengguang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-huojing-"></span>
            <div class="name">
              火警-
            </div>
            <div class="code-name">.icon-huojing-
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-jiantou-you"></span>
            <div class="name">
              箭头-右
            </div>
            <div class="code-name">.icon-jiantou-you
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-tongzhi1"></span>
            <div class="name">
              通知1
            </div>
            <div class="code-name">.icon-tongzhi1
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-GIS"></span>
            <div class="name">
              GIS
            </div>
            <div class="code-name">.icon-GIS
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shipin"></span>
            <div class="name">
              视频
            </div>
            <div class="code-name">.icon-shipin
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-pingmiantu"></span>
            <div class="name">
              平面图
            </div>
            <div class="code-name">.icon-pingmiantu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-chuli"></span>
            <div class="name">
              处理
            </div>
            <div class="code-name">.icon-chuli
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-danwei"></span>
            <div class="name">
              单位
            </div>
            <div class="code-name">.icon-danwei
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhongxin"></span>
            <div class="name">
              中心
            </div>
            <div class="code-name">.icon-zhongxin
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shuangjiantou-zuo"></span>
            <div class="name">
              双箭头-左
            </div>
            <div class="code-name">.icon-shuangjiantou-zuo
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shuangjiantou-you"></span>
            <div class="name">
              双箭头-右
            </div>
            <div class="code-name">.icon-shuangjiantou-you
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-guanbi"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-guanbi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhongjiqi"></span>
            <div class="name">
              中继器
            </div>
            <div class="code-name">.icon-zhongjiqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-qijian"></span>
            <div class="name">
              器件
            </div>
            <div class="code-name">.icon-qijian
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-duanluqi"></span>
            <div class="name">
              断路器
            </div>
            <div class="code-name">.icon-duanluqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shipinhezi"></span>
            <div class="name">
              视频盒子
            </div>
            <div class="code-name">.icon-shipinhezi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shexiangtou1"></span>
            <div class="name">
              摄像头1
            </div>
            <div class="code-name">.icon-shexiangtou1
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shurumokuai"></span>
            <div class="name">
              输入模块
            </div>
            <div class="code-name">.icon-shurumokuai
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shurushuchumokuai"></span>
            <div class="name">
              输入输出模块
            </div>
            <div class="code-name">.icon-shurushuchumokuai
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-bufang"></span>
            <div class="name">
              布防
            </div>
            <div class="code-name">.icon-bufang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-chefang"></span>
            <div class="name">
              撤防
            </div>
            <div class="code-name">.icon-chefang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-wulianwangwangguan"></span>
            <div class="name">
              物联网网关
            </div>
            <div class="code-name">.icon-wulianwangwangguan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-tingzhi"></span>
            <div class="name">
              停止
            </div>
            <div class="code-name">.icon-tingzhi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shebeiliandong"></span>
            <div class="name">
              设备联动
            </div>
            <div class="code-name">.icon-shebeiliandong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yuntongbu"></span>
            <div class="name">
              云同步
            </div>
            <div class="code-name">.icon-yuntongbu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-huanjingjiance"></span>
            <div class="name">
              环境监测
            </div>
            <div class="code-name">.icon-huanjingjiance
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-fenchenjiance"></span>
            <div class="name">
              粉尘监测
            </div>
            <div class="code-name">.icon-fenchenjiance
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-rechengxiang"></span>
            <div class="name">
              热成像
            </div>
            <div class="code-name">.icon-rechengxiang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shuizhijiance"></span>
            <div class="name">
              水质监测
            </div>
            <div class="code-name">.icon-shuizhijiance
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-qudongzhan"></span>
            <div class="name">
              驱动站
            </div>
            <div class="code-name">.icon-qudongzhan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-jinyong"></span>
            <div class="name">
              禁用
            </div>
            <div class="code-name">.icon-jinyong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-qiyong"></span>
            <div class="name">
              启用
            </div>
            <div class="code-name">.icon-qiyong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-huozaibaojing"></span>
            <div class="name">
              火灾自动报警系统
            </div>
            <div class="code-name">.icon-huozaibaojing
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-wuxianhuozaibaojing"></span>
            <div class="name">
              无线火灾报警系统
            </div>
            <div class="code-name">.icon-wuxianhuozaibaojing
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xiaofangyongshuixitong"></span>
            <div class="name">
              消防用水系统
            </div>
            <div class="code-name">.icon-xiaofangyongshuixitong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zonghecekongxitong"></span>
            <div class="name">
              综合测控系统
            </div>
            <div class="code-name">.icon-zonghecekongxitong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-dianqihuozaixitong"></span>
            <div class="name">
              电气火灾系统
            </div>
            <div class="code-name">.icon-dianqihuozaixitong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhihuiyongdianxitong"></span>
            <div class="name">
              智慧用电系统
            </div>
            <div class="code-name">.icon-zhihuiyongdianxitong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-fanghuomenxitong"></span>
            <div class="name">
              防火门系统
            </div>
            <div class="code-name">.icon-fanghuomenxitong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shipinxitong"></span>
            <div class="name">
              视频系统
            </div>
            <div class="code-name">.icon-shipinxitong
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-wenshidu"></span>
            <div class="name">
              温湿度
            </div>
            <div class="code-name">.icon-wenshidu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-paifengji"></span>
            <div class="name">
              排风机
            </div>
            <div class="code-name">.icon-paifengji
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xiaofangshuibeng"></span>
            <div class="name">
              消防水泵
            </div>
            <div class="code-name">.icon-xiaofangshuibeng
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yeyachuanganqi"></span>
            <div class="name">
              液压传感器
            </div>
            <div class="code-name">.icon-yeyachuanganqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-biaomianwendu"></span>
            <div class="name">
              表面温度
            </div>
            <div class="code-name">.icon-biaomianwendu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-mencikaiguan"></span>
            <div class="name">
              门磁开关
            </div>
            <div class="code-name">.icon-mencikaiguan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhendongchuanganqi"></span>
            <div class="name">
              震动传感器
            </div>
            <div class="code-name">.icon-zhendongchuanganqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zaosheng"></span>
            <div class="name">
              噪声
            </div>
            <div class="code-name">.icon-zaosheng
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yeweichuanganqi"></span>
            <div class="name">
              液位传感器
            </div>
            <div class="code-name">.icon-yeweichuanganqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shuijin"></span>
            <div class="name">
              水浸
            </div>
            <div class="code-name">.icon-shuijin
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-hongwaitanceqi"></span>
            <div class="name">
              红外探测器
            </div>
            <div class="code-name">.icon-hongwaitanceqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-guzhangdianhu"></span>
            <div class="name">
              故障电弧
            </div>
            <div class="code-name">.icon-guzhangdianhu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shebeixinghao"></span>
            <div class="name">
              设备型号
            </div>
            <div class="code-name">.icon-shebeixinghao
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yongchuanshebei"></span>
            <div class="name">
              用传设备
            </div>
            <div class="code-name">.icon-yongchuanshebei
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-baojingzhuji"></span>
            <div class="name">
              报警主机
            </div>
            <div class="code-name">.icon-baojingzhuji
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-keranqititanceqi"></span>
            <div class="name">
              可燃气体探测器
            </div>
            <div class="code-name">.icon-keranqititanceqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-ganwentanceqi"></span>
            <div class="name">
              感温探测器
            </div>
            <div class="code-name">.icon-ganwentanceqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-ganyantanceqi"></span>
            <div class="name">
              感烟探测器
            </div>
            <div class="code-name">.icon-ganyantanceqi
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yuyinjilu"></span>
            <div class="name">
              语音记录
            </div>
            <div class="code-name">.icon-yuyinjilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-dianhuajilu"></span>
            <div class="name">
              电话记录
            </div>
            <div class="code-name">.icon-dianhuajilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhibanjilu"></span>
            <div class="name">
              值班记录
            </div>
            <div class="code-name">.icon-zhibanjilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-caozuojilu"></span>
            <div class="name">
              操作记录
            </div>
            <div class="code-name">.icon-caozuojilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shijianjilu"></span>
            <div class="name">
              事件记录
            </div>
            <div class="code-name">.icon-shijianjilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-denglujilu"></span>
            <div class="name">
              登录记录
            </div>
            <div class="code-name">.icon-denglujilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-duanxinjilu"></span>
            <div class="name">
              短信记录
            </div>
            <div class="code-name">.icon-duanxinjilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-weixingxiaofangzhan"></span>
            <div class="name">
              微型消防站
            </div>
            <div class="code-name">.icon-weixingxiaofangzhan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-weibao"></span>
            <div class="name">
              维保
            </div>
            <div class="code-name">.icon-weibao
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhongdianbuwei"></span>
            <div class="name">
              重点部位
            </div>
            <div class="code-name">.icon-zhongdianbuwei
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-shebeitongji"></span>
            <div class="name">
              设备统计
            </div>
            <div class="code-name">.icon-shebeitongji
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-xunjiantongji"></span>
            <div class="name">
              巡检统计
            </div>
            <div class="code-name">.icon-xunjiantongji
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-zhibanrenyuan"></span>
            <div class="name">
              值班人员
            </div>
            <div class="code-name">.icon-zhibanrenyuan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-huojingyuan"></span>
            <div class="name">
              火警预案
            </div>
            <div class="code-name">.icon-huojingyuan
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-weixianpin"></span>
            <div class="name">
              危险品
            </div>
            <div class="code-name">.icon-weixianpin
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-gongdanjilu"></span>
            <div class="name">
              工单记录
            </div>
            <div class="code-name">.icon-gongdanjilu
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-yunhang"></span>
            <div class="name">
              运行
            </div>
            <div class="code-name">.icon-yunhang
            </div>
          </li>

                <li class="dib">
            <span class="icon iconfont icon-iconhamburger"></span>
            <div class="name">
              iconhamburger
            </div>
            <div class="code-name">.icon-iconhamburger
            </div>
          </li>

            </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-rizhi"></use>
                  </svg>
                  <div class="name">日志</div>
                  <div class="code-name">#icon-rizhi</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-kaiguan"></use>
                  </svg>
                  <div class="name">开关</div>
                  <div class="code-name">#icon-kaiguan</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-x_mokuai"></use>
                  </svg>
                  <div class="name">x_模块</div>
                  <div class="code-name">#icon-x_mokuai</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-luyouqi"></use>
                  </svg>
                  <div class="name">路由器</div>
                  <div class="code-name">#icon-luyouqi</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-xiyiji"></use>
                  </svg>
                  <div class="name">洗衣机</div>
                  <div class="code-name">#icon-xiyiji</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-hekriconshebeidianfanbao"></use>
                  </svg>
                  <div class="name">设备_电饭煲</div>
                  <div class="code-name">#icon-hekriconshebeidianfanbao</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-hekriconshebeidianshan"></use>
                  </svg>
                  <div class="name">设备_电扇</div>
                  <div class="code-name">#icon-hekriconshebeidianshan</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-jingshuiqi-f"></use>
                  </svg>
                  <div class="name">净水器-f</div>
                  <div class="code-name">#icon-jingshuiqi-f</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-weibolu"></use>
                  </svg>
                  <div class="name">微波炉</div>
                  <div class="code-name">#icon-weibolu</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-bingxiang1"></use>
                  </svg>
                  <div class="name">冰箱</div>
                  <div class="code-name">#icon-bingxiang1</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-xitongguanli1"></use>
                  </svg>
                  <div class="name">系统管理</div>
                  <div class="code-name">#icon-xitongguanli1</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-bingxiang"></use>
                  </svg>
                  <div class="name">冰箱</div>
                  <div class="code-name">#icon-bingxiang</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-kongdiao"></use>
                  </svg>
                  <div class="name">空调</div>
                  <div class="code-name">#icon-kongdiao</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-lishikongtiao"></use>
                  </svg>
                  <div class="name">立式空调</div>
                  <div class="code-name">#icon-lishikongtiao</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-gongyezujian-zhishideng"></use>
                  </svg>
                  <div class="name">工业组件-指示灯</div>
                  <div class="code-name">#icon-gongyezujian-zhishideng</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-diaodeng"></use>
                  </svg>
                  <div class="name">吊灯</div>
                  <div class="code-name">#icon-diaodeng</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-shedeng"></use>
                  </svg>
                  <div class="name">射灯</div>
                  <div class="code-name">#icon-shedeng</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-xidingdeng"></use>
                  </svg>
                  <div class="name">吸顶灯</div>
                  <div class="code-name">#icon-xidingdeng</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-bianji"></use>
                  </svg>
                  <div class="name">编辑</div>
                  <div class="code-name">#icon-bianji</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-alarm-full"></use>
                  </svg>
                  <div class="name">报警,警报,报警灯,危险</div>
                  <div class="code-name">#icon-alarm-full</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-saomiao"></use>
                  </svg>
                  <div class="name">扫描</div>
                  <div class="code-name">#icon-saomiao</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-zhihang"></use>
                  </svg>
                  <div class="name">执行</div>
                  <div class="code-name">#icon-zhihang</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-guanliyuan_jiaoseguanli"></use>
                  </svg>
                  <div class="name">管理员_角色管理</div>
                  <div class="code-name">#icon-guanliyuan_jiaoseguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-caidanguanli"></use>
                  </svg>
                  <div class="name">菜单管理</div>
                  <div class="code-name">#icon-caidanguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-yonghuzuguanli"></use>
                  </svg>
                  <div class="name">用户组管理</div>
                  <div class="code-name">#icon-yonghuzuguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-xitongguanli"></use>
                  </svg>
                  <div class="name">系统管理</div>
                  <div class="code-name">#icon-xitongguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-base_globalParamsquanjucanshu"></use>
                  </svg>
                  <div class="name">全局参数 base/setting/globalParams</div>
                  <div class="code-name">#icon-base_globalParamsquanjucanshu</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-yonghuguanli"></use>
                  </svg>
                  <div class="name">用户管理</div>
                  <div class="code-name">#icon-yonghuguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-wenjianjia2"></use>
                  </svg>
                  <div class="name">文件夹</div>
                  <div class="code-name">#icon-wenjianjia2</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-tuodong"></use>
                  </svg>
                  <div class="name">拖动</div>
                  <div class="code-name">#icon-tuodong</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-tuodong1"></use>
                  </svg>
                  <div class="name">拖动</div>
                  <div class="code-name">#icon-tuodong1</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-tuodong2"></use>
                  </svg>
                  <div class="name">拖动</div>
                  <div class="code-name">#icon-tuodong2</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-xingzhuang"></use>
                  </svg>
                  <div class="name">灯条</div>
                  <div class="code-name">#icon-xingzhuang</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-jishufuwu"></use>
                  </svg>
                  <div class="name">技术服务</div>
                  <div class="code-name">#icon-jishufuwu</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-pinpai"></use>
                  </svg>
                  <div class="name">品牌</div>
                  <div class="code-name">#icon-pinpai</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-jiaoben"></use>
                  </svg>
                  <div class="name">脚本</div>
                  <div class="code-name">#icon-jiaoben</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-assets"></use>
                  </svg>
                  <div class="name">资产</div>
                  <div class="code-name">#icon-assets</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-wuliaochangshang"></use>
                  </svg>
                  <div class="name">物料厂商</div>
                  <div class="code-name">#icon-wuliaochangshang</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-fuwu"></use>
                  </svg>
                  <div class="name">服务</div>
                  <div class="code-name">#icon-fuwu</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-shouye"></use>
                  </svg>
                  <div class="name">首页</div>
                  <div class="code-name">#icon-shouye</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-jiuyexieyi"></use>
                  </svg>
                  <div class="name">就业协议</div>
                  <div class="code-name">#icon-jiuyexieyi</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-changjingguanli"></use>
                  </svg>
                  <div class="name">场景管理</div>
                  <div class="code-name">#icon-changjingguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-wangguan"></use>
                  </svg>
                  <div class="name">网关</div>
                  <div class="code-name">#icon-wangguan</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-shebeiweihuguanli"></use>
                  </svg>
                  <div class="name">设备维护管理</div>
                  <div class="code-name">#icon-shebeiweihuguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-quyupaixu"></use>
                  </svg>
                  <div class="name">区域排序</div>
                  <div class="code-name">#icon-quyupaixu</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-shebeizuguanli"></use>
                  </svg>
                  <div class="name">设备组管理</div>
                  <div class="code-name">#icon-shebeizuguanli</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-juece"></use>
                  </svg>
                  <div class="name">宏观决策</div>
                  <div class="code-name">#icon-juece</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-nengyuan"></use>
                  </svg>
                  <div class="name">能源</div>
                  <div class="code-name">#icon-nengyuan</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-shitimoxing"></use>
                  </svg>
                  <div class="name">实体模型</div>
                  <div class="code-name">#icon-shitimoxing</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-richeng"></use>
                  </svg>
                  <div class="name">日程</div>
                  <div class="code-name">#icon-richeng</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-richeng1"></use>
                  </svg>
                  <div class="name">日程</div>
                  <div class="code-name">#icon-richeng1</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-houtaiguanli-shebeikucun"></use>
                  </svg>
                  <div class="name">后台管理-设备库存</div>
                  <div class="code-name">#icon-houtaiguanli-shebeikucun</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-zidonghua"></use>
                  </svg>
                  <div class="name">自动化</div>
                  <div class="code-name">#icon-zidonghua</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-zichan"></use>
                  </svg>
                  <div class="name">资产</div>
                  <div class="code-name">#icon-zichan</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-bulb-full"></use>
                  </svg>
                  <div class="name">电灯,电灯,发光,光,灯泡,想法</div>
                  <div class="code-name">#icon-bulb-full</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-zuobiaodian"></use>
                  </svg>
                  <div class="name">坐标点</div>
                  <div class="code-name">#icon-zuobiaodian</div>
              </li>

              <li class="dib">
                  <svg class="icon svg-icon" aria-hidden="true">
                      <use xlink:href="#icon-zhengchang"></use>
                  </svg>
                  <div class="name">正常</div>
                  <div class="code-name">#icon-zhengchang</div>
              </li>

              <li class="dib">
                  <svg aria-hidden="true" class="icon svg-icon">
                      <use xlink:href="#icon-baojing"></use>
                  </svg>
                <div class="name">报警</div>
                <div class="code-name">#icon-baojing</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang"></use>
                </svg>
                <div class="name">故障</div>
                <div class="code-name">#icon-guzhang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lixian"></use>
                </svg>
                <div class="name">离线</div>
                <div class="code-name">#icon-lixian</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghuxinxi"></use>
                </svg>
                <div class="name">用户信息</div>
                <div class="code-name">#icon-yonghuxinxi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tuichudenglu"></use>
                </svg>
                <div class="name">退出登录</div>
                <div class="code-name">#icon-tuichudenglu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiabandaka"></use>
                </svg>
                <div class="name">下班打卡</div>
                <div class="code-name">#icon-xiabandaka</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shangbandaka"></use>
                </svg>
                <div class="name">上班打卡</div>
                <div class="code-name">#icon-shangbandaka</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huojing"></use>
                </svg>
                <div class="name">火警</div>
                <div class="code-name">#icon-huojing</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baojing1"></use>
                </svg>
                <div class="name">报警1</div>
                <div class="code-name">#icon-baojing1</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhang1"></use>
                </svg>
                <div class="name">故障1</div>
                <div class="code-name">#icon-guzhang1</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qidong"></use>
                </svg>
                <div class="name">启动</div>
                <div class="code-name">#icon-qidong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baobiaotongji"></use>
                </svg>
                <div class="name">报表统计</div>
                <div class="code-name">#icon-baobiaotongji</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxibaogao"></use>
                </svg>
                <div class="name">分析报告</div>
                <div class="code-name">#icon-fenxibaogao</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingjishusan"></use>
                </svg>
                <div class="name">应急疏散</div>
                <div class="code-name">#icon-yingjishusan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xudianchi"></use>
                </svg>
                <div class="name">蓄电池</div>
                <div class="code-name">#icon-xudianchi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jianzhufenxi"></use>
                </svg>
                <div class="name">建筑分析</div>
                <div class="code-name">#icon-jianzhufenxi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gaoyapeidianfang"></use>
                </svg>
                <div class="name">高压配电房</div>
                <div class="code-name">#icon-gaoyapeidianfang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diantijifang"></use>
                </svg>
                <div class="name">电梯机房</div>
                <div class="code-name">#icon-diantijifang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaohuoshuanwenyafang"></use>
                </svg>
                <div class="name">消火栓稳压房</div>
                <div class="code-name">#icon-xiaohuoshuanwenyafang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-suoyongchangjing"></use>
                </svg>
                <div class="name">所用场景</div>
                <div class="code-name">#icon-suoyongchangjing</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chekuchurukou"></use>
                </svg>
                <div class="name">车库出入口</div>
                <div class="code-name">#icon-chekuchurukou</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guolufang"></use>
                </svg>
                <div class="name">锅炉房</div>
                <div class="code-name">#icon-guolufang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-diyapeidianfang"></use>
                </svg>
                <div class="name">低压配电房</div>
                <div class="code-name">#icon-diyapeidianfang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongkongshi"></use>
                </svg>
                <div class="name">中控室</div>
                <div class="code-name">#icon-zhongkongshi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shenghuoshuibengfang"></use>
                </svg>
                <div class="name">生活水泵房</div>
                <div class="code-name">#icon-shenghuoshuibengfang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chaiyoufadianjifang"></use>
                </svg>
                <div class="name">柴油发电机房</div>
                <div class="code-name">#icon-chaiyoufadianjifang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zongheshuibengfang"></use>
                </svg>
                <div class="name">综合水泵房</div>
                <div class="code-name">#icon-zongheshuibengfang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongyangkongtiaofang"></use>
                </svg>
                <div class="name">中央空调房</div>
                <div class="code-name">#icon-zhongyangkongtiaofang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanhuishangji"></use>
                </svg>
                <div class="name">返回上级</div>
                <div class="code-name">#icon-fanhuishangji</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shoubao"></use>
                </svg>
                <div class="name">手报</div>
                <div class="code-name">#icon-shoubao</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shengguang"></use>
                </svg>
                <div class="name">声光</div>
                <div class="code-name">#icon-shengguang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huojing-"></use>
                </svg>
                <div class="name">火警-</div>
                <div class="code-name">#icon-huojing-</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantou-you"></use>
                </svg>
                <div class="name">箭头-右</div>
                <div class="code-name">#icon-jiantou-you</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi1"></use>
                </svg>
                <div class="name">通知1</div>
                <div class="code-name">#icon-tongzhi1</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-GIS"></use>
                </svg>
                <div class="name">GIS</div>
                <div class="code-name">#icon-GIS</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipin"></use>
                </svg>
                <div class="name">视频</div>
                <div class="code-name">#icon-shipin</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pingmiantu"></use>
                </svg>
                <div class="name">平面图</div>
                <div class="code-name">#icon-pingmiantu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chuli"></use>
                </svg>
                <div class="name">处理</div>
                <div class="code-name">#icon-chuli</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-danwei"></use>
                </svg>
                <div class="name">单位</div>
                <div class="code-name">#icon-danwei</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongxin"></use>
                </svg>
                <div class="name">中心</div>
                <div class="code-name">#icon-zhongxin</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuangjiantou-zuo"></use>
                </svg>
                <div class="name">双箭头-左</div>
                <div class="code-name">#icon-shuangjiantou-zuo</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuangjiantou-you"></use>
                </svg>
                <div class="name">双箭头-右</div>
                <div class="code-name">#icon-shuangjiantou-you</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanbi"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-guanbi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongjiqi"></use>
                </svg>
                <div class="name">中继器</div>
                <div class="code-name">#icon-zhongjiqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qijian"></use>
                </svg>
                <div class="name">器件</div>
                <div class="code-name">#icon-qijian</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duanluqi"></use>
                </svg>
                <div class="name">断路器</div>
                <div class="code-name">#icon-duanluqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipinhezi"></use>
                </svg>
                <div class="name">视频盒子</div>
                <div class="code-name">#icon-shipinhezi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shexiangtou1"></use>
                </svg>
                <div class="name">摄像头1</div>
                <div class="code-name">#icon-shexiangtou1</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shurumokuai"></use>
                </svg>
                <div class="name">输入模块</div>
                <div class="code-name">#icon-shurumokuai</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shurushuchumokuai"></use>
                </svg>
                <div class="name">输入输出模块</div>
                <div class="code-name">#icon-shurushuchumokuai</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bufang"></use>
                </svg>
                <div class="name">布防</div>
                <div class="code-name">#icon-bufang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-chefang"></use>
                </svg>
                <div class="name">撤防</div>
                <div class="code-name">#icon-chefang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wulianwangwangguan"></use>
                </svg>
                <div class="name">物联网网关</div>
                <div class="code-name">#icon-wulianwangwangguan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tingzhi"></use>
                </svg>
                <div class="name">停止</div>
                <div class="code-name">#icon-tingzhi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeiliandong"></use>
                </svg>
                <div class="name">设备联动</div>
                <div class="code-name">#icon-shebeiliandong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuntongbu"></use>
                </svg>
                <div class="name">云同步</div>
                <div class="code-name">#icon-yuntongbu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huanjingjiance"></use>
                </svg>
                <div class="name">环境监测</div>
                <div class="code-name">#icon-huanjingjiance</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenchenjiance"></use>
                </svg>
                <div class="name">粉尘监测</div>
                <div class="code-name">#icon-fenchenjiance</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rechengxiang"></use>
                </svg>
                <div class="name">热成像</div>
                <div class="code-name">#icon-rechengxiang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuizhijiance"></use>
                </svg>
                <div class="name">水质监测</div>
                <div class="code-name">#icon-shuizhijiance</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qudongzhan"></use>
                </svg>
                <div class="name">驱动站</div>
                <div class="code-name">#icon-qudongzhan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jinyong"></use>
                </svg>
                <div class="name">禁用</div>
                <div class="code-name">#icon-jinyong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiyong"></use>
                </svg>
                <div class="name">启用</div>
                <div class="code-name">#icon-qiyong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huozaibaojing"></use>
                </svg>
                <div class="name">火灾自动报警系统</div>
                <div class="code-name">#icon-huozaibaojing</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wuxianhuozaibaojing"></use>
                </svg>
                <div class="name">无线火灾报警系统</div>
                <div class="code-name">#icon-wuxianhuozaibaojing</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaofangyongshuixitong"></use>
                </svg>
                <div class="name">消防用水系统</div>
                <div class="code-name">#icon-xiaofangyongshuixitong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zonghecekongxitong"></use>
                </svg>
                <div class="name">综合测控系统</div>
                <div class="code-name">#icon-zonghecekongxitong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianqihuozaixitong"></use>
                </svg>
                <div class="name">电气火灾系统</div>
                <div class="code-name">#icon-dianqihuozaixitong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhihuiyongdianxitong"></use>
                </svg>
                <div class="name">智慧用电系统</div>
                <div class="code-name">#icon-zhihuiyongdianxitong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fanghuomenxitong"></use>
                </svg>
                <div class="name">防火门系统</div>
                <div class="code-name">#icon-fanghuomenxitong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shipinxitong"></use>
                </svg>
                <div class="name">视频系统</div>
                <div class="code-name">#icon-shipinxitong</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wenshidu"></use>
                </svg>
                <div class="name">温湿度</div>
                <div class="code-name">#icon-wenshidu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-paifengji"></use>
                </svg>
                <div class="name">排风机</div>
                <div class="code-name">#icon-paifengji</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaofangshuibeng"></use>
                </svg>
                <div class="name">消防水泵</div>
                <div class="code-name">#icon-xiaofangshuibeng</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yeyachuanganqi"></use>
                </svg>
                <div class="name">液压传感器</div>
                <div class="code-name">#icon-yeyachuanganqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaomianwendu"></use>
                </svg>
                <div class="name">表面温度</div>
                <div class="code-name">#icon-biaomianwendu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mencikaiguan"></use>
                </svg>
                <div class="name">门磁开关</div>
                <div class="code-name">#icon-mencikaiguan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhendongchuanganqi"></use>
                </svg>
                <div class="name">震动传感器</div>
                <div class="code-name">#icon-zhendongchuanganqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zaosheng"></use>
                </svg>
                <div class="name">噪声</div>
                <div class="code-name">#icon-zaosheng</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yeweichuanganqi"></use>
                </svg>
                <div class="name">液位传感器</div>
                <div class="code-name">#icon-yeweichuanganqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shuijin"></use>
                </svg>
                <div class="name">水浸</div>
                <div class="code-name">#icon-shuijin</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-hongwaitanceqi"></use>
                </svg>
                <div class="name">红外探测器</div>
                <div class="code-name">#icon-hongwaitanceqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guzhangdianhu"></use>
                </svg>
                <div class="name">故障电弧</div>
                <div class="code-name">#icon-guzhangdianhu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeixinghao"></use>
                </svg>
                <div class="name">设备型号</div>
                <div class="code-name">#icon-shebeixinghao</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yongchuanshebei"></use>
                </svg>
                <div class="name">用传设备</div>
                <div class="code-name">#icon-yongchuanshebei</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baojingzhuji"></use>
                </svg>
                <div class="name">报警主机</div>
                <div class="code-name">#icon-baojingzhuji</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-keranqititanceqi"></use>
                </svg>
                <div class="name">可燃气体探测器</div>
                <div class="code-name">#icon-keranqititanceqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ganwentanceqi"></use>
                </svg>
                <div class="name">感温探测器</div>
                <div class="code-name">#icon-ganwentanceqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ganyantanceqi"></use>
                </svg>
                <div class="name">感烟探测器</div>
                <div class="code-name">#icon-ganyantanceqi</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyinjilu"></use>
                </svg>
                <div class="name">语音记录</div>
                <div class="code-name">#icon-yuyinjilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianhuajilu"></use>
                </svg>
                <div class="name">电话记录</div>
                <div class="code-name">#icon-dianhuajilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibanjilu"></use>
                </svg>
                <div class="name">值班记录</div>
                <div class="code-name">#icon-zhibanjilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-caozuojilu"></use>
                </svg>
                <div class="name">操作记录</div>
                <div class="code-name">#icon-caozuojilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijianjilu"></use>
                </svg>
                <div class="name">事件记录</div>
                <div class="code-name">#icon-shijianjilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-denglujilu"></use>
                </svg>
                <div class="name">登录记录</div>
                <div class="code-name">#icon-denglujilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-duanxinjilu"></use>
                </svg>
                <div class="name">短信记录</div>
                <div class="code-name">#icon-duanxinjilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixingxiaofangzhan"></use>
                </svg>
                <div class="name">微型消防站</div>
                <div class="code-name">#icon-weixingxiaofangzhan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weibao"></use>
                </svg>
                <div class="name">维保</div>
                <div class="code-name">#icon-weibao</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhongdianbuwei"></use>
                </svg>
                <div class="name">重点部位</div>
                <div class="code-name">#icon-zhongdianbuwei</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shebeitongji"></use>
                </svg>
                <div class="name">设备统计</div>
                <div class="code-name">#icon-shebeitongji</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xunjiantongji"></use>
                </svg>
                <div class="name">巡检统计</div>
                <div class="code-name">#icon-xunjiantongji</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhibanrenyuan"></use>
                </svg>
                <div class="name">值班人员</div>
                <div class="code-name">#icon-zhibanrenyuan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huojingyuan"></use>
                </svg>
                <div class="name">火警预案</div>
                <div class="code-name">#icon-huojingyuan</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixianpin"></use>
                </svg>
                <div class="name">危险品</div>
                <div class="code-name">#icon-weixianpin</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gongdanjilu"></use>
                </svg>
                <div class="name">工单记录</div>
                <div class="code-name">#icon-gongdanjilu</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yunhang"></use>
                </svg>
                <div class="name">运行</div>
                <div class="code-name">#icon-yunhang</div>
            </li>

              <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-iconhamburger"></use>
                </svg>
                <div class="name">iconhamburger</div>
                <div class="code-name">#icon-iconhamburger</div>
            </li>

          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
